<template>
  <div class="app-container">
    <div class="container-bg">
      <el-row :gutter="10">
        <el-col :span="20">
          <div
            style="
              margin: 0 10px 10px 0;
              display: flex;
              justify-content: space-between;
            "
          >
            <div>
              Wi-Fi 列表
              <el-checkbox
                style="margin-left: 20px"
                v-model="openInfo.iPower"
                :true-label="1"
                :false-label="0"
                @change="editOpenCloseWiFi"
                >启用</el-checkbox
              >
            </div>
            <el-button
              size="mini"
              @click="getWifiScanList"
              icon="el-icon-refresh"
              >扫描</el-button
            >
          </div>
          <el-table
            class="auto-table"
            :data="list"
            border
            element-loading-text="Loading"
            fit
            highlight-current-row
            height="calc(100vh - 130px)"
            @row-click="getWiFiInfo"
          >
            <el-table-column align="center" label="序号" width="120">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column align="center" label="Wi-Fi名称">
              <template slot-scope="scope">{{ scope.row.sName }}</template>
            </el-table-column>
            <el-table-column align="center" label="Wi-Fi强度">
              <template slot-scope="scope">{{ scope.row.Strength }}</template>
            </el-table-column>
            <el-table-column align="center" label="安全模式">
              <template slot-scope="scope">{{ scope.row.sSecurity }}</template>
            </el-table-column>
            <el-table-column align="center" label="Wi-Fi状态" prop="Favorite">
              <template slot-scope="scope">
                <el-tag
                  size="small"
                  :type="FavoriteStatusColor(scope.row.sState)"
                  >{{ FavoriteStatus(scope.row.sState) }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column align="center" label="Wi-Fi优先级">
              <template slot-scope="scope">{{ scope.row.Favorite }}</template>
            </el-table-column>
            <el-table-column align="center" label="类型">
              <template slot-scope="scope">{{ scope.row.sType }}</template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="4">
          <div>Wi-Fi 设置</div>
          <el-form ref="elForm2" :model="form" size="medium">
            <el-form-item label="">
              <el-checkbox
                v-model="form.iAutoconnect"
                :true-label="1"
                :false-label="0"
                >Wi-Fi 自动连接</el-checkbox
              >
            </el-form-item>
            <el-form-item label="Wi-Fi 名称" prop="sName">
              <el-input
                v-model="form.sName"
                placeholder="请输入Wi-Fi 名称"
                :style="{ width: '100%' }"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="Wi-Fi 密码" prop="sPassword">
              <el-input
                v-model="form.sPassword"
                placeholder="请输入Wi-Fi 密码"
                :style="{ width: '100%' }"
                type="password"
                :disabled="form.sState == 'ready'"
                show-password
              >
              </el-input>
            </el-form-item>
            <div style="font-size:12px;color:#ff4949;margin-bottom:5px;" v-if="form.sState == 'ready'">wifi已连接，如需重设密码请先删除！</div>
            <el-form-item style="white-space: nowrap">
              <el-button
                :disabled="!form.sName"
                type="primary"
                size="medium"
                @click="submitForm"
                >连接</el-button
              >
              <el-popconfirm
                cancel-button-text="不用了"
                class="m-margin-l10"
                confirm-button-text="好的"
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除当前WiFi吗？"
                @confirm="doDelete"
              >
                <el-button
                  :disabled="!form.sName"
                  type="danger"
                  size="medium"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getNetworkWiFiOpenCloseApi,
  editNetworkWiFiOpenCloseApi,
  editNetworkWiFiOpenCloseApi2,
  getAutoCntWifi,
  putNetworkScanApi,
  getNetworkWiFiListApi,
  delNetworkWiFiListApi,
} from "@/api/network";
export default {
  data() {
    return {
      openInfo: {},
      list: [],
      form: { sName: "" },
      connectInfo: {}, // 连接之后的内容
      setInter: null,
    };
  },
  created() {
    this.getOpenCloseWiFi();
    this.getWifiScanList();
  },
  computed: {
    FavoriteStatus() {
      return function (val) {
        if (val == 'ready') {
          return "就绪";
        } else if (val == 'connect') {
          return "连接中";
        } else if (val == 'fail') {
          return "失败";
        } else if (val == 'association') {
          return "协商中";
        } else {
          return "未连接";
        }
      };
    },
    FavoriteStatusColor() {
      return function (val) {
        if (val == 'ready') {
          return "success";
        } else if (val == 'connect') {
          return "warning";
        } else if (val == 'fail') {
          return "danger";
        }else if (val == 'association') {
          return "info";
        } else {
          return "";
        }
      };
    },
  },
  methods: {
    getWifiList(msg) {
      getNetworkWiFiListApi().then((res) => {
        if (Array.isArray(res)) {
          this.list = res;
          if (msg) {
            this.setListiFavorite(this.form,'connect');
          }
        }
      });
    },
    // 连接
    submitForm() {
      editNetworkWiFiOpenCloseApi(this.form).then((res) => {
        if (Array.isArray(res)) {
          this.connectInfo = res[0]?.sService;
          // 判断返回的是否连接成功
          let iFavorite = res[0] ? res[0]?.dbconfig.iFavorite : 0;
          console.log('iFavorite',iFavorite);
          this.turnGetTen();
          // if (iFavorite == 0) {
            // 让此时连接中
            // this.setListiFavorite(this.form,'connect');
          // }
        }
      });
    },
    // 定时器十次
    turnGetTen() {
      let time = 10;
      this.setInter = setInterval(() => {
        time--;
        this.getWifiScanList('turn');
        if (time <= 0) {
          clearInterval(this.setInter);
          this.doDelete("over");
        }
      }, 1000);
    },
    // 设置连接的状态
    setListiFavorite(form, status) {
      this.list = this.list.map((v) => {
        if (form.sName == v.sName) {
          this.$set(v, "sState", status);
        }
        return v;
      });
    },
    // 获取启用
    getOpenCloseWiFi() {
      getNetworkWiFiOpenCloseApi().then((res) => {
        this.openInfo = res;
      });
    },
    //操作启用关闭
    editOpenCloseWiFi(val) {
      let params = val == 1 ? "on" : "off" ;
      editNetworkWiFiOpenCloseApi2(params).then((res) => {
        let iPower = res.iPower,inter;
        if (iPower) {
          let num = 20;
          inter =  setInterval(() => {
            num--;
            this.getWifiScanList();
            if (num <= 0) {
              clearInterval(inter);
            }
          },1000);
        }else {
          this.list = [];
          this.form = { sName: "" };
          clearInterval(inter);
        }
      });
    },
    // 获取WiFi是否成功
    getWifiScanList(msg) {
      putNetworkScanApi().then((res) => {
        this.getWifiList(msg);
      });
    },
    // 点击获取详情
    getWiFiInfo(row, column) {
      this.form = this.$fn.deepCopy(row);
      this.$set(this.form, "iAutoconnect", 0);
      this.$set(this.form, "sPassword", "");
      if (row.sState == 'ready') {
        this.form.sPassword = '******';
      }
    },
    doDelete(msg) {
      delNetworkWiFiListApi(this.form.sService)
        .then((res) => {})
        .catch((err) => {
          if (msg) {
            getAutoCntWifi()
              .then((res) => {})
              .catch((err) => {
                this.setListiFavorite(this.form, 'fail');
              });
          } else {
            this.getWifiScanList();
          }
        });
    },
  },
  destroyed() {
    if (this.setInter) clearInterval(this.setInter);
  },
};
</script>

<style lang="scss" scoped>
.app-container {

}
</style>

